<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-08-26 09:50:18
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-11-05 16:48:17
 * @FilePath: \web-components-box\components\Table\index.vue
 * @Description: 表格表单
-->
<script setup lang="tsx">
import type { TableColumnData } from '@arco-design/web-vue'

const props = defineProps({
  data: { // 数据
    type: Array,
    required: true,
    default: () => [],
  },
  /* 加载loading */
  tableLoading: { // 加载loading
    type: Boolean,
    default: false,
  },
  showPagination: { // 显示分页选择器
    type: Boolean,
    default: true,
  },
  totalCount: { // 数据总条数
    type: Number,
    default: 0
  },
  columns: { // 表头设置
    type: Array as () => TableColumnData[],
    default: []
  },
  showRowSelection: { // 显示行选择器
    type: Boolean,
    default: false
  },
  showCheckedAll: { // 显示勾选所有
    type: Boolean,
    default: true
  },
  currentPageSelection: { // 仅展示当前页的 keys
    type: Boolean,
    default: false
  },
  scrollX: { // x轴方向上的宽度
    type: String,
    default: 'auto'
  },
  pageSize: {
    type: Number,
    default: 20
  }
})

const emits = defineEmits(['refresh', 'selectRows', 'rowDblclick'])

const formTableRef = ref()
// 刷新loading
const refreshLoading = computed(() => {
  return props.tableLoading
})
// 批量选择
const selectedKeys = ref([]) as any
// 勾选框 配置
const rowSelection = ref({
  type: 'checkbox',
  showCheckedAll: computed(() => props.showCheckedAll),
  onlyCurrent: computed(() => props.currentPageSelection), // 仅展示当前页的 keys
}) as any

// 分页器设置属性
const pagination = ref({
  current: 1,
  pageSize: computed(() => props.pageSize), // 默认每页显示数量
  total: computed(() => props.totalCount),
  showTotal: true,
  showJumper: true,
  showQuickJumper: true, // 跳转分页
  showPageSize: true,
})

// 校验表单数据
const formData = ref<{
  tableData: any[]
}>({
  tableData: [],
})

watch(
  () => props.data,
  () => {
    formData.value.tableData = props.data
  }, {
    immediate: true
  }
)

// 刷新table表单数据
const refreshTableDataList = () => {
  const params = {
    page: pagination.value.current,
    size: pagination.value.pageSize,
  }
  emits('refresh', params)
}

// 改变分页页数
const onPageChange = (page: number) => {
  pagination.value.current = page
  refreshTableDataList()
}
// 改变每页数据条数
const onPageSizeChange = (pageSize: number) => {
  pagination.value.current = 1
  pagination.value.pageSize = pageSize
  refreshTableDataList()
}
// 批量 勾选处理
function onSelection(ids: any) {
  selectedKeys.value = ids
  emits('selectRows', selectedKeys.value)
}
// 双击数据行
const onRowClick = (record: Record<string, any>) => {
  emits('rowDblclick', record)
}

//自动校验表格必填验证
const autoCheckTableFormValidate = async () => {
  return await formTableRef.value.validate()
}

defineExpose({
  refreshTableDataList,
  autoCheckTableFormValidate
})
</script>

<template>
  <div class="formTable">
    <a-form ref="formTableRef" :model="formData">
      <a-table
        v-model:selectedKeys="selectedKeys"
        class="min-h-[200px]"
        v-bind:row-selection="props.showRowSelection ? rowSelection : null"
        row-key="id"
        :columns="props.columns"
        :data="formData.tableData"
        :loading="refreshLoading"
        :table-layout-fixed="true"
        :scroll="{
          x: props.scrollX,
          y: '100%'
        }"
        :pagination="props.showPagination ? pagination : false"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
        @selection-change="onSelection"
        @row-dblclick="onRowClick"
      >
        <!-- 使用v-slot来传递所有插槽内容 -->
        <template v-for="slotName in Object.keys($slots).filter(item => item !== 'default')" :key="slotName" v-slot:[slotName]="slotProps">
          <!-- 这里假设slotProps包含了所有传递给插槽的props -->
          <slot :name="slotName" v-bind="slotProps"></slot>
        </template>
      </a-table>
    </a-form>
  </div>
</template>

<style lang="less" scoped>
.formTable {
  position: relative;
  height: auto;
  width: 100%;

  :deep(.arco-table) {
    margin: 16px;
  }
  // 没数据
  :deep(tr.arco-table-tr.arco-table-tr-empty) {
    height: 120px;
  }
  // 表格内渲染cell样式
  :deep(.arco-table-cell) {
    height: 50px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  // 去除表头圆角
  :deep(.arco-table-header) {
    border-radius: 0px;
  }
  // 修改表头字体样式
  :deep(.arco-table-th-title) {
    height: 50px;
    line-height: 50px;
    color: #1D2129;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>